<template>
    <div class="options">
      <el-button type="primary" @click="handleOpenEdit(false)">添加器械商</el-button>
    </div>
    <el-table :data="props.list" v-loading="props.loading">
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="address" label="经营地址" />
      <el-table-column prop="phone" label="联系电话" />
      <el-table-column prop="licenseNum" label="许可证编号" />
      <el-table-column label="操作" width="220">
        <template #default="{ row }">
          <el-button type="primary" @click="handleDetail(row.medicalId)" link>详情</el-button>
          <el-button type="info" @click="handleOpenEdit(row.medicalId)" link>编辑</el-button>
          <el-button type="danger" @click="handleDelete(row.medicalId)" link>删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <detail-popup v-if="showDetail" ref="detailRef" @close="showDetail = false" />
    <edit-popup v-if="showEdit" ref="editRef" @success="handleSuccess" />
  </template>
  
  <script setup>
  import { ref, defineProps, nextTick } from "vue";
  import { deleteMedicalUserAPI } from "@/network/medicaluser";
  import feedback from "@/utils/feedback";
  
  const props = defineProps({
    list: Array,
    loading: Boolean
  });
  
  const emits = defineEmits(["refresh"]);
  
  const showDetail = ref(false);
  const showEdit = ref(false);
  const detailRef = ref(null);
  const editRef = ref(null);
  
  const handleDetail = async (id) => {
    showDetail.value = true;
    await nextTick();
    detailRef.value?.open(id);
  };
  
  const handleOpenEdit = async (id) => {
    showEdit.value = true;
    await nextTick();
    editRef.value?.open(id);
  };
  
  const handleDelete = async (id) => {
    await feedback.confirm("确定删除该器械商？");
    await deleteMedicalUserAPI(id);
    emits("refresh");
  };
  
  const handleSuccess = () => {
    showEdit.value = false;
    emits("refresh");
  };
  </script>